<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin: auto;
            width: 700px;
            padding-top: 20px;
        }
        body p{
            display: inline-block;
            border-bottom: 1px solid red;
        }
        #table thead{
            height:50px;
            background: #F5FFE8;
        }
        #tab,#tab1,#tab2,#tab3,#tab4{
            width: 240px;
        }
        #table thead tr th{
            width: 110px;
            color: #000;
            font-size: 16px;
        }
        #table tbody tr th{
            width: 240px;
        }
        .num{
            width: 40px;
        }
    </style>
</head>
<body>
<h5><img src="jd.png" alt="">购物车</h5>
<p>商品数量 <span class="wu">5</span></p>
<table id="table">
    <thead>
    <tr>
        <th>图片</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr class="tr">
        <td><img src="end1.png" alt=""></td>
        <td id="tab"><img src="京东购物车图标_03.gif" alt="">美伦达 赣南脐橙 2017新上市  3斤装 铂金果</td>
        <td>￥<span>19.90</span></td>
        <td><input class="num" type="text" value="1"></td>
        <td><span></span></td>
        <td class="del">删除</td>
    </tr>
    <tr class="tr">
        <td><img src="end2.png" alt=""></td>
        <td id="tab1"><img src="京东购物车图标_03.gif" alt="">Camposol 秘鲁进口精选蓝莓 4盒装  单盒约125g 新鲜水果</td>
        <td>￥<span>46.90</span></td>
        <td><input class="num" type="text" value="1"></td>
        <td><span></span></td>
        <td class="del">删除</td>
    </tr>
    <tr class="tr">
        <td><img src="end3.png" alt=""></td>
        <td id="tab2"><img src="京东购物车图标_03.gif" alt="">欢乐果园  广西青皮芒果  2个装  单果约260g以上 新鲜水果</td>
        <td>￥<span>10.90</span></td>
        <td><input class="num" type="text" value="1"></td>
        <td><span></span></td>
        <td class="del">删除</td>
    </tr>
    <tr class="tr">
        <td><img src="end4.png" alt=""></td>
        <td id="tab3"><img src="京东购物车图标_03.gif" alt="">爱奇果  新疆库尔勒香梨  约2.5kg 当季新果 特约装  单果约120-</td>
        <td>￥<span>39.90</span></td>
        <td><input class="num" type="text" value="1"></td>
        <td><span></span></td>
        <td class="del">删除</td>
    </tr>
    <tr class="tr">
        <td><img src="end5.png" alt=""></td>
        <td id="tab4"><img src="京东购物车图标_03.gif" alt="">宏辉果蔬  苹果  烟台红富士12个  单果约75mm  总重约2.1kg新鲜</td>
        <td>￥<span>34.90</span></td>
        <td><input class="num" type="text" value="1"></td>
        <td><span></span></td>
        <td class="del">删除</td>
    </tr>
    </tbody>
</table>
<div style="text-align: end">总价 ： ￥<span id="allCont">元</span></div>
<script>
    function s() {
        let tr = document.querySelectorAll('#table .tr')
        //总价
        let allCont = document.querySelector("#allCont");
        //先让总价等于0
        let allContNum = 0

        for(let i = 0;i<tr.length;i++){
            //单价
            var price = tr[i].children[2].children[0].innerHTML
            //数量
            var num = tr[i].children[3].children[0].value;
            //小计
            var cont = tr[i].children[4].children[0].innerHTML = price * num
            console.log(cont)

            allContNum += cont
        }
        //赋值总价
        allCont.innerHTML = allContNum
    }
    s()


    //修改数量的功能
    //获取table中所有的input数量
    let ipt = document.querySelectorAll("table .num");

    for(let j = 0;j<ipt.length;j++){
        ipt[j].addEventListener('change',s)
    }


    //删除功能
    let del = document.querySelectorAll(".del");
    for(let k = 0;k < del.length;k++){
        del[k].addEventListener('click',function () {
            console.log(this);
            var body = document.querySelector("#table tbody");
            console.log(body);
            //根据父级删除子级
            body.removeChild(this.parentNode)
            //
            s()
            //商品数量个数的减少
            let tw = document.querySelectorAll('#table .tr');
             var spz = tw.length;
            console.log(spz)
            var hw = document.querySelector(".wu");
            hw.innerHTML = spz
        })
    }


</script>
</body>
</html>